<template>
    <div class="window" @mouseup="status">
        <button @click="open">点击</button>

        <div class="pop-window" v-if="show" @mousedown.stop.prevent="down" @mouseup.stop.prevent="up"
            @mousemove.stop.prevent="move">
            <div class="hander">
                <slot name="hand" v-if="showhander" @mouseup="status">
                    <div class="hander-left">
                        <img src="../assets/应用中心.png" alt="">
                        <p>列表</p>
                    </div>
                    <div class="hander-right">
                        <div class="min" @click="small" v-if="showmin">
                            <img src="../assets/减号.png" alt="">
                        </div>
                        <div class="max" @click="max" v-if="showmax">
                            <img src="../assets/扩大.png" alt="">
                        </div>
                        <div class="close" @click="close" v-if="showclose">
                            <img src="../assets/错误.png" alt="">
                        </div>
                    </div>
                </slot>
            </div>
            <div class="contain">
                <slot name="container" @mouseup="status"></slot>
            </div>
            <div class="topline" @mousedown.stop.prevent="topdown" @mousemove.stop.prevent="topmove"
                @mouseup.stop.prevent="topup"></div>
            <div class="bottonline" @mousedown="bottondown" @mousemove="bottonmove" @mouseup="bottonup"></div>
            <div class="leftline" @mousedown="leftdown" @mousemove="leftmove" @mouseup="leftup"></div>
            <div class="rightline" @mousedown="rightdown" @mousemove="rightmove" @mouseup="rightup"></div>
        </div>

    </div>
</template>

<script>
export default {
    props: {
        showmin: {
            type: Boolean,
            default: true,
        },
        showmax: {
            type: Boolean,
            default: true,
        },
        showclose: {
            type: Boolean,
            default: true,
        },
        showhander: {
            type: Boolean,
            default: true,
        }
    },
    data() {
        return {
            show: false,
            isDragging: false,
            isTop: false,
            isLeft: false,
            mouseX: 0,
            mouseY: 0,
            boxX: 0,
            boxY: 0,
            topmouseY: 0,
            topboxY: 0,
            leftmouseX: 0,
            leftboxX: 0,
            boxHeight: 0,
            boxWidth: 0,

        }
    },
    mounted() {
        window.addEventListener('mouseup', this.status);
    },
    beforeDestroy() {

        window.removeEventListener('mouseup', this.status);
    },
    methods: {
        open() {
            this.show = !this.show
        },
        close() {
            this.show = false
        },
        small() {
            const popwindow = document.querySelector('.pop-window')
            popwindow.style.width = '200px'
            popwindow.style.height = '300px'
            popwindow.style.top = '50px'
            popwindow.style.left = '470px'
        },
        max() {
            const popwindow = document.querySelector('.pop-window')
            popwindow.style.width = '100%'
            popwindow.style.height = '100%'
            popwindow.style.top = '0'
            popwindow.style.left = '0'

        },
        status() {
            this.isDragging = false;
            this.isTop = false;
            this.isLeft = false;
        },

        down(e) {
            const popwindow = document.querySelector('.pop-window');
            if (e.target.classList.contains('hander') || e.target.closest('.pop-window').classList.contains('contain')) {
                this.isDragging = true;
                this.mouseX = e.clientX;
                this.mouseY = e.clientY;
                this.boxX = popwindow.offsetLeft;
                this.boxY = popwindow.offsetTop;
            }
        },
        up() {
            this.isDragging = false;
        },
        move(e) {
            const popwindow = document.querySelector('.pop-window');
            if (this.isDragging) {
                popwindow.style.left = `${this.boxX + e.clientX - this.mouseX}px`;
                popwindow.style.top = `${this.boxY + e.clientY - this.mouseY}px`;
            }
        },
        topdown(e) {
            const popwindow = document.querySelector('.pop-window');
            this.isTop = true;
            this.topmouseY = e.clientY;
            this.topboxY = popwindow.offsetTop;
            this.boxHeight = popwindow.offsetHeight;
        },
        topup() {
            this.isTop = false
            console.log(111);
            const topline = document.querySelector('.topline')
            topline.style.height = '50px'
            topline.style.top = '-50px'
        },
        topmove(e) {
            if (this.isTop) {
                const topline = document.querySelector('.topline')
                const popwindow = document.querySelector('.pop-window');
                if (e.target.className == 'topline' && e.clientY - this.topmouseY != 0) {
                    popwindow.style.top = `${this.topboxY + e.clientY - this.topmouseY}px`;
                    console.log("top", this.boxHeight);
                    popwindow.style.height = `${this.boxHeight - e.clientY + this.topmouseY}px`;
                    topline.style.height = '100vh'
                    topline.style.top = '-20vh'
                }
            }
        },
        bottondown(e) {
            const popwindow = document.querySelector('.pop-window');
            this.isTop = true;
            this.topmouseY = e.clientY;
            this.boxHeight = popwindow.offsetHeight;
        },
        bottonup() {
            this.isTop = false
            console.log(111);
            const bottonline = document.querySelector('.bottonline')
            bottonline.style.height = '50px'
            bottonline.style.top = '95%'
        },
        bottonmove(e) {
            if (this.isTop) {
                const bottonline = document.querySelector('.bottonline')
                const popwindow = document.querySelector('.pop-window');
                if (e.target.className == 'bottonline' && e.clientY - this.topmouseY != 0) {
                    popwindow.style.height = `${this.boxHeight + e.clientY - this.topmouseY}px`;
                    bottonline.style.height = '100vh'
                    bottonline.style.top = '0'
                }
            }
        },
        leftdown(e) {
            this.isLeft = true;
            const popwindow = document.querySelector('.pop-window');
            this.leftmouseX = e.clientX;
            this.leftboxX = popwindow.offsetLeft;
            this.boxWidth = popwindow.offsetWidth;
        },
        leftup() {
            this.isLeft = false
            const leftline = document.querySelector('.leftline')
            leftline.style.width = '50px'
            leftline.style.left = '-10px'
        },
        leftmove(e) {
            if (this.isLeft) {
                const leftline = document.querySelector('.leftline')
                const popwindow = document.querySelector('.pop-window');
                if (e.target.className == 'leftline' && e.clientX - this.leftmouseX != 0) {
                    popwindow.style.left = `${this.leftboxX + e.clientX - this.leftmouseX}px`;
                    console.log("top", this.topboxY);
                    popwindow.style.width = `${this.boxWidth - e.clientX + this.leftmouseX}px`;
                    leftline.style.width = '100vw'
                    leftline.style.left = '-50vw'
                }
            }
        },
        rightdown(e) {
            const popwindow = document.querySelector('.pop-window');
            this.isLeft = true;
            this.leftmouseX = e.clientX;
            this.boxWidth = popwindow.offsetWidth;

        },
        rightup() {

            this.isLeft = false
            const  rightline = document.querySelector('.rightline')
             rightline.style.width = '50px'
                    rightline.style.left = '95%'
        },
        rightmove(e) {
            if (this.isLeft) {
                const  rightline = document.querySelector('.rightline')
                const popwindow = document.querySelector('.pop-window');
                if (e.target.className == 'rightline' && e.clientX - this.leftmouseX != 0) {
                    popwindow.style.width = `${this.boxWidth + e.clientX - this.leftmouseX}px`;
                    rightline.style.width = '100vw'
                    rightline.style.left = '0'
                }
            }
        },
    },

}
</script>

<style lang="less" scoped>
// @popwidth:300px;
.window {
    width: 100vw;
    height: 100vh;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.pop-window {
    position: fixed;
    top: 50px;
    left: 470px;
    width: 300px;
    height: 500px;
    background-color: #3874bd;

    .hander {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        height: 30px;
        width: 100%;

        .hander-left {
            display: flex;
            justify-content: start;
            width: 40%;
            // img{
            //     margin: 5px;
            // }

        }

        .hander-right {
            display: flex;
            justify-content: space-around;
            margin-right: 3%;

            img {
                margin: 5px;

            }
        }
    }

    .contain {
        position: relative;
        height: 95%;
        width: 100%;
        background-color: #fff;
    }

    .topline {
        position: absolute;
        top: -50px;
        left: 0;
        width: 100%;
        height: 50px;
        z-index: 10;
        cursor: text;

    }

    .bottonline {
        position: absolute;
        top: 95%;
        left: 0;
        width: 100%;
        height: 50px;
        z-index: 10;
        cursor: text;
        // background-color: #3874bd;

    }

    .leftline {
        position: absolute;
        top: 0;
        left: -10%;
        width: 50px;
        height: 100%;
        z-index: 10;
        cursor: vertical-text;

    }

    .rightline {
        position: absolute;
        top: 0;
        left: 97%;
        width: 50px;
        height: 100%;
        z-index: 10;
        cursor: vertical-text;

    }
}
</style>